import { View } from '@tarojs/components';
import { useEffect, useState } from 'react';
import Select from '@/components/Select';
import './index.scss';

interface ISkuItem {
  name: string;
  id: string | number;
}

export default function ({ defaultSku = {}, skuList, onChangeSku }) {
  const [choosed, setChoosed] = useState<ISkuItem | {}>({});

  const onChange = (id: any) => {
    const filterSku = skuList.filter((item) => item.id === id);
    setChoosed(filterSku[0]);
    onChangeSku(filterSku[0]);
  };

  useEffect(() => {
    if (defaultSku.id) {
      setChoosed(defaultSku);
    }
  }, [defaultSku, skuList]);
  return (
    <View className="choose-sku">
      <View className="choose-title">选择规格</View>
      <View className="sku-list">
        <Select
          list={skuList.map((sku) => ({ ...sku, value: sku.id }))}
          active={choosed.id}
          onChange={onChange}
        />
      </View>
    </View>
  );
}
